import * as React from 'react';
import './MeshMessage.scss';
import { FromGroup, IInputStepList } from '../commonCompents/FromGroup/FromGroup';
import { ISelectMesh } from '../EditorContent/EditorContent';
import { TransformType } from '@/interface/common';
import { EditorModels } from '../../ts/EditorModels';
import EditorSetPostionCommands from '../../ts/commands/EditorSetPostionCommands';
import { throttle, useThrottle } from '@/utils/Utils';
import { EnumEditorCommandType } from '../../ts/commands/EditorCommands';
import EditorSetScaleCommands from '../../ts/commands/EditorSetScalcCommands';
import EditorSetRotateCommands from '../../ts/commands/EditorSetRotateCommands';
import EditorNoData from '../commonCompents/EditorNoData/EditorNoData';
export interface IMeshMessageProps {
  selectMesh: ISelectMesh;
  editorScene: EditorModels;
}
const initRotate: IInputStepList[] = [
  {
    name: 'x轴',
    type: 'x',
    num: 0,
    step: 0.05,
  },
  {
    name: 'y轴',
    type: 'y',
    num: 0,
    step: 0.05,
  },
  {
    name: 'z轴',
    type: 'z',
    num: 0,
    step: 0.05,
  },
];

const initPosition: IInputStepList[] = [
  {
    name: 'x轴',
    type: 'x',
    num: 0,
    step: 0.05,
  },
  {
    name: 'y轴',
    type: 'y',
    num: 0,
    step: 0.05,
  },
  {
    name: 'z轴',
    type: 'z',
    num: 0,
    step: 0.05,
  },
];

const initScalc: IInputStepList[] = [
  {
    name: 'x轴',
    type: 'x',
    num: 0,
    step: 0.05,
  },
  {
    name: 'y轴',
    type: 'y',
    num: 0,
    step: 0.05,
  },
  {
    name: 'z轴',
    type: 'z',
    num: 0,
    step: 0.05,
  },
];

export function MeshMessage(props: IMeshMessageProps) {
  let [rotate, setRotate] = React.useState<IInputStepList[]>(initRotate);
  let [position, setPosition] = React.useState<IInputStepList[]>(initPosition);
  let [scalc, setScalc] = React.useState<IInputStepList[]>(initScalc);
  let { editorScene, selectMesh } = props;
  let transformControlsMouseDownObject = {
    position: selectMesh.mesh.position.clone(),
    rotation: selectMesh.mesh.rotation.clone(),
    scale: selectMesh.mesh.scale.clone(),
  };

  const onchangeTransfrom = useThrottle(
    (type: string, newNum: number, transformType: TransformType) => {
      let transform = props.selectMesh.mesh[transformType];
      let transformNum = rotate.map((item) => {
        let isType = item.type === type;
        transform[item.type] = isType ? newNum : transform[item.type];
        return {
          ...item,
          num: isType ? newNum : item.num,
        };
      });
      if (transformType === TransformType.Rotate) {
        editorScene.histroy.execute(
          new EditorSetRotateCommands({
            editor: editorScene,
            object: selectMesh.mesh,
            oldRotation: transformControlsMouseDownObject.rotation,
            newRotation: selectMesh.mesh.rotation,
          }),
          EnumEditorCommandType.SetRotateCommand,
        );
        setRotate(transformNum);
      } else if (transformType === TransformType.Position) {
        editorScene.histroy.execute(
          new EditorSetPostionCommands({
            editor: editorScene,
            object: selectMesh.mesh,
            oldPosition: transformControlsMouseDownObject.position,
            newPosition: selectMesh.mesh.position,
          }),
          EnumEditorCommandType.SetPositionCommand,
        );
        setPosition(transformNum);
      } else if (transformType === TransformType.Scalc) {
        editorScene.histroy.execute(
          new EditorSetScaleCommands({
            editor: editorScene,
            object: selectMesh.mesh,
            oldScale: transformControlsMouseDownObject.scale,
            newScale: selectMesh.mesh.scale,
          }),
          EnumEditorCommandType.SetScaleCommand,
        );
        setScalc(transformNum);
      }
      editorScene.updateView();
    },
    20,
  );
  return (
    <div className="meshMessagePage">
      {props.selectMesh.visit ? (
        <>
          <FromGroup
            name="平移"
            transformType={TransformType.Position}
            selectMesh={props.selectMesh.mesh}
            inputStepList={position}
            onchange={(type, num) => onchangeTransfrom(type, num, TransformType.Position)}
          />
          <FromGroup
            name="旋转"
            transformType={TransformType.Rotate}
            selectMesh={props.selectMesh.mesh}
            inputStepList={rotate}
            onchange={(type, num) => onchangeTransfrom(type, num, TransformType.Rotate)}
          />
          <FromGroup
            name="缩放"
            transformType={TransformType.Scalc}
            selectMesh={props.selectMesh.mesh}
            inputStepList={scalc}
            onchange={(type, num) => onchangeTransfrom(type, num, TransformType.Scalc)}
          />
        </>
      ) : (
        <EditorNoData description="暂无选中目标"/>
      )}
    </div>
  );
}
